<template>
  <div>
    <a-card style="padding: 2%">
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_LIST">
        <h1 style="font-size: 28px">设备数据消息</h1>
        <a-row :gutter="20">
          <a-col :span="9">
            <a-form-item label="查询数据" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <a-input v-model:value="queryContent" placeholder="请输入要查询的内容"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button @click="initQueryData" type="primary" block>
              <SearchOutlined/>
              搜索
            </a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="resetData" block>
              <SyncOutlined/>
              重置
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="4">
            <a-button @click="exportFile" type="primary" block>
              下载
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="24" style="margin-top: 30px;">
            <a-table :columns="columns"
                     :row-key="record => record.id"
                     :data-source="dataList"
                     :pagination="pageOptions"
                     :loading="isLoading"
            >
              <template #temperature_value="{ record }">
                <div>
                  {{ record.temperature_value + "℃" }}
                </div>
              </template>
              <template #power="{ record }">
                <div>
                  {{ record.power + "%" }}
                </div>
              </template>
              <template #temperature_state="{ record }">
                <div :style="record.temperature_state == 0 ? 'color: black':'color: red'">
                  {{ record.temperature_state == 0 ? "正常":"异常" }}
                </div>
              </template>
              <template #tamper_state="{ record }">
                <div :style="record.tamper_state == 0 ? 'color: black':'color: red'">
                  {{ record.tamper_state == 0 ? "正常":"异常" }}
                </div>
              </template>
              <template #correct_state="{ record }">
                <div :style="record.correct_state == 0 ? 'color: black':'color: red'">
                  {{ record.correct_state == 0 ? "正常":"异常" }}
                </div>
              </template>
              <template #type="{ record }">
                <div>
                  {{ record.type+'/'+record.type.toString(16) }}
                </div>
              </template>
              <template #action="{ record }">
                <a-button type="link" @click="detailData(record)">
                  <UnorderedListOutlined/>
                  详情
                </a-button>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </div>
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL">
        <info-msg-detail :view-type="showType" :item="selectItem" @my-emit="callBack"></info-msg-detail>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">

import {defineComponent, onMounted, onUnmounted, toRefs} from "@vue/runtime-core";
import {reactive} from "vue";
import {SHOW_TYPE_ENUM} from "/@/enums/viewTypeEnum";
import {CoreUtils} from "/@/utils/coreUtils";
import {queryDevInfoMsgList} from "/@/api/product/msg";
import {columns} from "/@/views/product/dev-info-msg/infoMsgIndex";
import InfoMsgDetail from "./infoMsgDetail.vue"
import {message} from "ant-design-vue";
import {HttpQueryResult} from "/@/api/core/model/coreModel";

export default defineComponent({
  components:{
    InfoMsgDetail
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    current: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 15,
    }
  },
  setup(props, {}){

    const data = reactive({
      showType: SHOW_TYPE_ENUM.SHOW_TYPE_LIST,
      selectItem: null,
      queryContent: '',
      dataList: [] as any[],
      isLoading: false,
      pageOptions: {
        total: props.total,
        current: props.current,
        pageSize: props.pageSize,
        pageSizeOptions: ['15', '30', '50', '100'],
        showSizeChanger: true,  // 显示可改变每页数量
        showQuickJumper: false, // 是否显示跳转
        showTotal: (total: any) => `共 ${total} 条`, // 显示总数
        onChange: (current: any, pageSize: any) => {
          paginationChange({current: current, pageSize: pageSize});
        },
        onShowSizeChange: (current: any, pageSize: any) => {
          paginationChange({current: current, pageSize: pageSize});
        },
      }
    });

    const paginationChange = (pageData?: any) => {
      data.pageOptions.current = pageData.current;
      data.pageOptions.pageSize = pageData.pageSize;
      queryData();
    };

    // 查询
    const queryData = () =>{
      data.isLoading = true;
      data.dataList = [];
      queryDevInfoMsgList({
        query_type: 0,
        query_content: data.queryContent,
        page_index: data.pageOptions.current,
        page_size: data.pageOptions.pageSize,
      }).then((result: HttpQueryResult) => {
        data.isLoading = false;
        if (result.code == 0) {
          data.pageOptions.total = result.data.total_size;
          data.dataList = result.data.data;
        }
      });
    };

    // 手动查询，需要重置起始页
    const initQueryData = () => {
      data.pageOptions.current = 1;
      queryData();
    };
    // 重置
    const resetData = () => {
      data.queryContent = '';
      data.pageOptions.current = 1;
      queryData();
    };

    // 下载
    const exportFile = () => {
      message.warn("暂未开放，敬请期待");
    };
    // 详情
    const detailData = (item) => {
      data.selectItem = item;
      data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL;
    };

    // Emit
    const callBack = (item) => {
      CoreUtils.console_log(item);
      data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_LIST;
      queryData();
    }

    onMounted(() => {
      queryData();
    });

    // 销毁
    onUnmounted(() => {

    });

    return {
      ...toRefs(data),
      SHOW_TYPE_ENUM,
      columns,
      initQueryData,
      resetData,
      exportFile,
      detailData,
      callBack,
    };

  },
});

</script>

<style scoped></style>
